<template>
    <div class="box">
        <div class="datatitle">{{ data.type }}</div>
        <div class="dataname" :class="data.state ">{{ data.name }}</div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
    data:{
        type:Object,
        defult:()=>{}
    }
})
</script>

<style scoped>
.offline{
    background-color: #717171;
}
.stop{
    background-color: #E85B15;
}
.maintain{
    background-color: #FAC858;
}
.wait{
    background-color: #ABCFAF;
}
.run{
    background-color: #49D400;
}
.box{
    width: calc((100% - 200px) / 5);
    height: 70px;
    position: relative;
    margin: 0 20px 10px 20px;
}
.datatitle{
    width: 100%;
    height: 20px;
    text-align: center;
    color: white;
    font-size: 14px;
}
.dataname{
    width: 100%;
    height: 50px;
    text-align: center;
    color: white;
    line-height: 50px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>